<template>
  <div>
    <el-dialog
      v-model="show"
      :title="title"
      width="500"
      draggable
      destroy-on-close
      @close="reset"
    >
      <div>
        <el-table
          :data="props.roleList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column property="roleName" label="角色名称" width="120" />
          <el-table-column property="roleKey" label="权限字符" width="120" />
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="reset">取消</el-button>
          <el-button type="primary" @click="onSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineExpose, ref, defineProps, defineEmits, reactive } from "vue";

const props = defineProps({
  roleList: {
    type: Array,
    default: () => [],
  },
});

const show = ref(false);
const title = ref("角色设置");
const formDate = reactive({
  userId: null,
  roleId: null,
});

const emits = defineEmits(["common"]);

const handleSelectionChange = (val) => {
  let arr = val.map((item) => item.roleId);
  formDate.roleId = arr[0];
};

const open = (item) => {
  show.value = true;
  formDate.userId = item;
};

const onSubmit = () => {
  emits("common", formDate);
  reset();
};
const reset = () => {
  show.value = false;
  formDate.userId = null;
  formDate.roleId = null;
};
defineExpose({
  open,
});
</script>

<style></style>
